<template>
  <div id="message">
      <div id="title">
        <mt-header title="客服">
            <mt-button slot="left" icon="back" @click="clickBlack"></mt-button>
            <mt-button class="mui-icon mui-icon-extra mui-icon-extra-cart" slot="right" @click="clickgouwu"></mt-button>
        </mt-header>
        <div class="top">
          <div class="title">
             <img src="../../assets/zhailiyin.png" alt="失败">
              <div class="title_right" >
                  <span>娜娜(专属客服)</span>
                  <p>有什么可以帮您</p>
              </div>
          </div>
          <!-- 第二个 -->
          <div class="title">
             <img src="http://image10.nahuo.com/Uploaded/qunzu/group/230062/e3200f903a5c48e5a32339f138f4bc1f.png" alt="失败">
              <div class="title_right" >
                  <span>系统通知信息</span>
                  <p>新人专享。恭喜你完成注册,新人专享....</p>
              </div>
          </div>
        </div>
         <!--  常见问题 -->
        <div class="bottom">
               <div class="text_header">常见问题</div>
          </div>
      </div>
      <div id="listView">
       <sheet-list v-for="(item,index,key) in List" :item="item" :key="key"></sheet-list>
      </div>
  </div>
</template>
<script>
import myMusicSheetList from "./mySheetList.vue";
export default {
  components: { "sheet-list": myMusicSheetList },
  data() {
    return {
      show: false,
      List: [
        {
          Title: "售后怎么处理？",
          Detail:
            "遇到发错货或者次品，将对应的货品图片拍好与订单截图一起发给客服。返回来调换，来回运费拼货团承担。如遇客服回复不及时，请耐心等待。"
        },
        {
          Title: "可以退换货吗？",
          Detail:
            "天天拼货团是买手制批发平台，旨在为全国店主提供优质货源。专业买手从一级批发市场精选商品提供给店主拼单拿货，仓库在发货前进行抽查质检。参与“拼货”也必须遵从一级批发档口不支持退换货的行业规则，如果有特殊情况可联系客服为您解决，恳请您的理解，并万分感谢您对天天拼货团的支持。"
        },
        {
          Title: "运费怎么计算？",
          Detail:
            "下单的时候系统会预收运费，发货后按实际邮费收取，多退少补，按周结算，每周三结算上一周运费。如果订单有缺货，将先退货款，运费周结的时候再退"
        },
        {
          Title: "下单后什么时候发货? ",
          Detail:
            "对于成团的款式，拼货团的买手将在拼货结束后去市场下单采购，若有货的款式将于拼货结束后48小时发出。遇到排单的款式，则顺延。"
        },
        {
          Title: "拍错了怎么修改订单？",
          Detail:
            "拼货结束前可以在订单里自行申请退款，场次结束后系统自动退款到拼货团账户。拼货结束后，则不能再修改或取消订单。"
        },
        {
          Title: "如何提现？",
          Detail:
            "只有先通过身份验证，绑定银行卡之后才可申请提现。操作流程：我的钱包——安全设置——1.身份验证/2.提现银行卡/3.提现"
        },
        {
          Title: "活跃分如何获取？",
          Detail:
            "活跃分获取渠道：1、订单完结后，1元=1积分；2、实体店验证送1000；3、充值送积分，1元=1分，充值金额只可交易不能用于提现。每笔活跃分有效期30天"
        }
      ]
    };
  },
  methods: {
    clickBlack() {
      this.$router.go(-1);
    },
    clickgouwu() {
      this.$router.push({ path: "/gouwu" });
    },
    Show(key) {
      console.log("显示与隐藏");
      this.show = !this.show;
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  list-style: disc;
}
#message {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background: white;
  z-index: 999;
  #listView {
    width: 100%;
    height: 133%;
    position: absolute;
    top: 260px;
    bottom: 0px;
    background: white;
    z-index: 44;
  }
  #title {
    width: 100%;
    height: 260px;
    position: fixed;
    top: 0;
    z-index: 999;
    background: white;
    .bottom {
      width: 100%;
      height: 50px;
      border-top: 10px solid gainsboro;
      border-bottom: 1px solid gainsboro;
      .text_header {
        width: 100%;
        display: flex;
        padding: 10px;
      }
    }
    .top {
      width: 100%;
      height: 145px;
      display: flex;
      flex-direction: column;
      .title {
        width: 100%;
        height: 50%;
        border-bottom: gainsboro 1px solid;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 17px;
        }
        .title_right {
          display: flex;
          flex-direction: column;
          span {
            flex: 1;
            margin: 7px;
            font-size: 15px;
          }
          p {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .mint-header {
      height: 65px;
      background: #c6091b;
      font-size: 20px;
    }
  }
  #kefu {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 210px;
    bottom: 50px;
    background: red;
  }
}
</style>


